<template>
    <div class="activezhui">
        <header>
            <strong @click="showrules=true">

            </strong>
        </header>
        <section class="listshow">
            <ul>
                <li v-for="(item, index) in list"><span>{{item.name}}</span>
                    <button @click="show('showssq',item.html,item.ChaseCount)">立即抢购</button>
                </li>
            </ul>
        </section>
        <section class="listshow">
            <ul>
                <li v-for="(item, index) in list"><span>{{item.name}}</span>
                    <button @click="show('showdlt',item.html,item.ChaseCount)">立即抢购</button>
                </li>
            </ul>
        </section>
        <div v-transfer-dom>
            <popup v-model="showssq" position="bottom">
                <div class="container">
                    <p class="c-header"><span>双色球套餐</span> <strong v-html="title"></strong></p>
                    <section class="buycon">
                        <p class="title">
                            <span>请选择6个红球和1个蓝球</span>
                            <button @click="randomssq">机选一注</button>
                        </p>
                        <aside class="ballscon">
                            <ul class="redlists clearfix">
                                <li v-for="(item, index) in rlis" :class="[item.checked?'checked':'']"
                                    @click="checked('rlis',rlis,index,item)">
                                    {{item.value}}
                                </li>
                            </ul>
                            <ul class="bluelists clearfix">
                                <li v-for="(item, index) in blis" :class="[item.checked?'checked':'']"
                                    @click="checked('blis',blis,index,item)">
                                    {{item.value}}
                                </li>
                            </ul>
                        </aside>
                    </section>
                    <footer class="operaction">
                        <span class='gry' @click="showssq=false">取消</span>
                        <span class="red" @click="buyssq(3)">立即购买</span>
                    </footer>
                </div>
            </popup>
        </div>
        <div v-transfer-dom>
            <popup v-model="showdlt" position="bottom">
                <div class="container">
                    <p class="c-header"><span>大乐透套餐</span> <strong v-html="title"></strong></p>
                    <section class="buycon">
                        <p class="title">
                            <span>请选择5个红球和2个蓝球</span>
                            <button @click="randomdlt">机选一注</button>
                        </p>
                        <aside class="ballscon">
                            <ul class="redlists clearfix">
                                <li v-for="(item, index) in dltrlis" :class="[item.checked?'checked':'']"
                                    @click="checked('dltrlis',dltrlis,index,item)">
                                    {{item.value}}
                                </li>
                            </ul>
                            <ul class="bluelists clearfix">
                                <li v-for="(item, index) in dltblis" :class="[item.checked?'checked':'']"
                                    @click="checked('dltblis',dltblis,index,item)">
                                    {{item.value}}
                                </li>
                            </ul>
                        </aside>
                    </section>
                    <footer class="operaction">
                        <span class='gry' @click="showdlt=false">取消</span>
                        <span class="red" @click="buydlt(4)">立即购买</span>
                    </footer>
                </div>
            </popup>
        </div>
        <div v-transfer-dom>
            <popup v-model="showrules" position="bottom">
                <div class="ruls">
                    <i @click="showrules=false"></i>
                    <img src="//common-1253410441.file.myqcloud.com/activityimg/20171130112610.jpg" alt="">
                </div>
            </popup>
        </div>
    </div>

</template>

<script>
    import {Marquee, MarqueeItem, Toast, Popup} from 'vux';
    import {getMytoken, getLogintoken} from '../../services/common';
    import {nativetonative, h5tonative} from '../../utils/otherfn';
    import {namesource, jumptype} from '../../utils/config/common';
    import axios from 'axios';
    import store from 'store2';
    const done = (num, arr)=> {
        let newArray = [], arro = arr.slice(0);//解决操作影响arr
        for (var index = 0; index < num; index++) {
            var n = Math.floor(Math.random() * arro.length);
            newArray.push(arro[n]);
            arro.splice(n, 1);
        }
        return newArray;
    };
    export default {
        components: {
            Marquee,
            MarqueeItem,
            Toast,
            Popup
        },
        data() {
            return {
                showssq: false,
                showdlt: false,
                showrules: false,
                rlis: [],
                blis: [],
                dltrlis: [],
                dltblis: [],
                list: [
                    {
                        name: '追10期，不中返2元',
                        ChaseCount: 10,
                        html: `10期 (20元) — 不中返<i style="color:#ff405c">2</i>元`
                    }, {
                        name: '追30期，不中返15元',
                        ChaseCount: 30,
                        html: `30期 (60元) — 不中返<i style="color:#ff405c">15</i>元`
                    }, {
                        name: '追50期，不中返200元',
                        ChaseCount: 50,
                        html: `50期 (100元) — 不中返<i style="color:#ff405c">200</i>元`
                    }
                ],
                title: `10期 (20元) — 不中返<i style="color:#ff405c">2</i>元`,
                ChaseCount: 10
            };
        },
        created() {
            let rlis = [], blis = [];
            for (let ri = 1; ri <= 33; ri++) {
                let temobj = {};
                temobj.value = (ri < 10 ? ('0' + ri) : ri.toString());
                temobj.checked = false;
                temobj.lostnum = '';
                temobj.type = 'red';
                rlis.push(temobj);
            }
            for (let bi = 1; bi <= 16; bi++) {
                let temobj = {};
                temobj.value = (bi < 10 ? ('0' + bi) : bi.toString());
                temobj.checked = false;
                temobj.type = 'blue';
                blis.push(temobj);
            }
            let dltrlis = [], dltblis = [];
            for (let ri = 1; ri <= 35; ri++) {
                let temobj = {};
                temobj.value = (ri < 10 ? ('0' + ri) : ri.toString());
                temobj.checked = false;
                temobj.lostnum = '';
                temobj.type = 'red';
                dltrlis.push(temobj);
            }
            for (let bi = 1; bi <= 12; bi++) {
                let temobj = {};
                temobj.value = (bi < 10 ? ('0' + bi) : bi.toString());
                temobj.checked = false;
                temobj.type = 'blue';
                dltblis.push(temobj);
            }
            this.rlis = rlis;
            this.blis = blis;
            this.dltrlis = dltrlis;
            this.dltblis = dltblis;
        },
        computed: {},
        methods: {
            /**
             * 获取一些初始化信息
             */
            checked(type, balls, index, item){
                balls[index].checked = !item.checked;
                this[type] = balls;
            },
            show(type, title, ChaseCount){
                this[type] = true;
                this['title'] = title;
                this.ChaseCount = ChaseCount;
                this.dltrlis.map(e => {
                    e.checked = false
                });
                this.dltblis.map(e => {
                    e.checked = false
                });
                this.rlis.map(e => {
                    e.checked = false
                });
                this.blis.map(e => {
                    e.checked = false
                });
            },
            buyssq: async function (LotteryID) {
                let rednum, bluenum, rednums = [], bluenums = [];
                rednum = this.rlis.filter((e)=>e.checked).length;
                bluenum = this.blis.filter((e)=>e.checked).length;
                if(rednum == 6 && bluenum == 1) {
                    this.rlis.map(e=> {
                        if(e.checked) {
                            rednums.push(e.value);
                        }
                    });
                    this.blis.map(e=> {
                        if(e.checked) {
                            bluenums.push(e.value);
                        }
                    });

                    const {data:{code, data}}=await axios.get(`/data/Handler.ashx?action=201&params={"LotteryID":"${LotteryID}"}`);
                    if(data && code === 0) {
                        const {LotteryName, PreName, BaseName, ID, Name}=data;
                        getMytoken(false).then((userinfo) => {
                            let payResult = {
                                Number: [{
                                    Money: 2,
                                    Number: `${rednums.join(' ')}+${bluenums.join(' ')}`,
                                    PlayTypeID: '301'
                                }],
                                LotteryID,
                                LotteryName,
                                IssueName: Name,
                                ChaseCount: this.ChaseCount,
                                Multi: 1,
                                TotalMoney: this.ChaseCount * 2,
                                UserCode: userinfo.token,
                                IssueID: ID,
                                ChaseFlag: this.ChaseCount
                            };
                            store('payResult', {payResult: payResult});
                            h5tonative('订单支付', `${location.origin}/#/security/pay`)
                        });

                    }
                    console.log(data);
                }
                else {
                    this.$vux.toast.text('只能选6个红球和1个蓝球')
                }
            },
            buydlt: async function (LotteryID) {
                let rednum, bluenum, rednums = [], bluenums = [];
                rednum = this.dltrlis.filter((e)=>e.checked).length;
                bluenum = this.dltblis.filter((e)=>e.checked).length;
                if(rednum == 5 && bluenum == 2) {
                    this.dltrlis.map(e=> {
                        if(e.checked) {
                            rednums.push(e.value);
                        }
                    });
                    this.dltblis.map(e=> {
                        if(e.checked) {
                            bluenums.push(e.value);
                        }
                    });

                    const {data:{code, data}}=await axios.get(`/data/Handler.ashx?action=201&params={"LotteryID":"${LotteryID}"}`);
                    if(data && code === 0) {
                        const {LotteryName, PreName, BaseName, ID, Name}=data;
                        getMytoken(false).then((userinfo) => {
                            let payResult = {
                                Number: [{
                                    Money: 2,
                                    Number: `${rednums.join(' ')}+${bluenums.join(' ')}`,
                                    PlayTypeID: '401'
                                }],
                                LotteryID,
                                LotteryName,
                                IssueName: Name,
                                ChaseCount: this.ChaseCount,
                                Multi: 1,
                                TotalMoney: this.ChaseCount * 2,
                                UserCode: userinfo.token,
                                IssueID: ID,
                                ChaseFlag: this.ChaseCount
                            };
                            store('payResult', {payResult: payResult});
                            h5tonative('订单支付', `${location.origin}/#/security/pay`)
                        });

                    }
                }
                else {
                    this.$vux.toast.text('只能选5个红球和2个蓝球')
                }
            },
            randomssq(){
                let redarr = done(6, this.rlis);
                let bluearr = done(1, this.blis);
                this.rlis.map(e => {
                    e.checked = false
                });
                this.blis.map(e => {
                    e.checked = false
                });
                //然后操作
                this.rlis.map(pitem => {
                    if(redarr.some((item) =>
                                    item.value === pitem.value
                            )) {
                        pitem.checked = true;
                    }
                });
                this.blis.map(pitem => {
                    if(bluearr.some((item) =>
                                    item.value === pitem.value
                            )) {
                        pitem.checked = true;
                    }
                });
            },
            randomdlt(){
                let redarr = done(5, this.dltrlis);
                let bluearr = done(2, this.dltblis);
                this.dltrlis.map(e => {
                    e.checked = false
                });
                this.dltblis.map(e => {
                    e.checked = false
                });
                //然后操作
                this.dltrlis.map(pitem => {
                    if(redarr.some((item) =>
                                    item.value === pitem.value
                            )) {
                        pitem.checked = true;
                    }
                });
                this.dltblis.map(pitem => {
                    if(bluearr.some((item) =>
                                    item.value === pitem.value
                            )) {
                        pitem.checked = true;
                    }
                });
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .activezhui {
        height: 1336px;
        background: url(//common-1253410441.file.myqcloud.com/activityimg/20171123110857.png) no-repeat center;
        background-size: contain;
        header {
            height: 494px;
            position: relative;
            strong {
                position: absolute;
                width: 128px;
                height: 80px;
                right: 0;
                top: 0;
            }
        }
        .balls(@color) {
            width: 78px;
            height: 78px;
            border-radius: 50%;
            text-align: center;
            line-height: 78px;
            border: 1px solid @color;
            float: left;
            margin: 0 20px 20px 0;
            color: @color;
            font-size: 40px;
            &.checked {
                color: #fff;
                background: @color;
            }
        }
        .listshow {
            margin-top: 96px;
            height: 316px;
            ul {
                width: 622px;
                margin: 0 auto;
                li {
                    display: flex;
                    font-size: 32px;
                    font-weight: bold;
                    margin-bottom: 57px;
                    span {
                        flex: 1;
                    }
                    button {
                        width: 172px;
                        height: 50px;
                        font-size: 28px;
                        font-weight: bold;
                        color: #fff;
                        background: @color6;
                        text-align: center;
                        border: none;
                        border-radius: 50px;
                    }
                }
            }
        }
        .container {
            background: #fff;
            .c-header {
                height: 100px;
                background: #c7dee9;
                display: flex;
                align-items: center;
                padding: 0 10px 0 33px;
                span {
                    flex: 1;
                    color: #ff405c;
                    font-size: 36px;
                    font-weight: bold;
                }
                strong {
                    font-size: 28px;
                    font-weight: bold;
                    i {
                        color: #ff405c;
                    }
                }
            }
            .buycon {
                padding: 0 10px 0 40px;
                .title {
                    display: flex;
                    align-items: center;
                    height: 120px;
                    span {
                        flex: 1;
                        font-size: 28px;
                    }
                    button {
                        width: 130px;
                        height: 50px;
                        border-radius: 50px;
                        background: #ff405c;
                        color: #fff;
                        font-size: 28px;
                    }
                }
            }
            .ballscon {
                .redlists {
                    width: 750px;
                    li {
                        .balls(#ff405c);
                    }
                }
                .bluelists {
                    width: 750px;
                    li {
                        .balls(#2296fe);
                    }
                }
            }
            .operaction {
                height: 80px;
                display: flex;
                align-items: center;
                span {
                    flex: 1;
                    text-align: center;
                    height: 100%;
                    line-height: 80px;
                    font-size: 36px;
                    &.gry {
                        background: #eff0f0;
                    }
                    &.red {
                        background: #ff405c;
                        color: #fff;
                    }
                }
            }
        }
        .ruls {
            position: relative;
            i {
                position: absolute;
                width: 100px;
                height: 100px;
                right: 0;
                top: 0;
            }
            img {
                display: block;
                width: 100%;
            }
        }
    }

</style>